<template>
  <div>
    <h2>1.展示TODO的每一项，完成的字体颜色为绿色。未完成的字体颜色为红色</h2>
    <list :todos="todos">
      <template slot-scope="scope">
        <h3>子组件回传的数据:{{ scope }}</h3>
        <h3 :style="{ color: scope.todo.isCompleted ? 'green' : 'red' }">
          {{ scope.todo.text }}
        </h3>
      </template>
    </list>
    <br />
    <h2>2.展示TODO的每一项，完成的背景颜色为绿色，未完成的背景颜色为红色</h2>
    <list :todos="todos">
      <template slot-scope="{ todo }">
        <h3>子组件回传的数据:{{ todo }}</h3>
        <h3 :style="{ 'background-color': todo.isCompleted ? 'green' : 'red' }">
          {{ todo.text }}
        </h3>
      </template>
    </list>
  </div>
</template>

<script>
import List from "./List.vue";
export default {
  name: "ScopeSlot",
  components: { List },
  data() {
    return {
      todos: [
        { id: 1, text: "AAA", isCompleted: true },
        { id: 2, text: "BBB", isCompleted: true },
        { id: 3, text: "CCC", isCompleted: false },
        { id: 4, text: "DDD", isCompleted: false },
      ],
    };
  },
};
</script>

<style>
</style>